<template>
     <div>
<el-dialog title="入职人员" :visible.sync="dialogFormVisible">
  <el-form :model="form">
      <tr>
        <td>
          <el-form-item label="部门:" prop="buMne" >
            <el-select v-model="form.buMne" placeholder="请选择部门" clearable disabled>
              <el-option v-for="item in options" :key="item.id" :label="item.buMenName" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="职位:" prop="zhiWeir">
            <el-select v-model="form.zhiWeir" placeholder="请选择职位" clearable disabled>
              <el-option v-for="item in opp" :key="item.id" :label="item.postsName" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </td>
      </tr>
      <!-- <tr>
        <td>
        <el-form-item label="员工姓名:" prop="name">
            <el-select v-model="form.name" placeholder="请选择职位" clearable>
              <el-option v-for="item in aa" :key="item.id" :label="item.yuanGongName" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </td>
      </tr> -->
      <tr>
        <td>
          <el-form-item label="上级负责人:" prop="ren">
            <el-select v-model="form.ren" placeholder="请选择学历" clearable disabled>
              <el-option v-for="item in bb" :key="item.id" :label="item.headName" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="入职日期">
            <el-col :span="11">
              <el-date-picker type="date" placeholder="选择出生年月" v-model="form.ruDate" style="width: 100%;">
              </el-date-picker>
            </el-col>
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="备注:">
         {{form.beiZhu}}
          </el-form-item>
        </td>
      </tr>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
  </div>
</el-dialog>
       <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="姓名">
          <el-input v-model="formInline.shengPiRen" placeholder="请输入姓名"></el-input>
        </el-form-item> 
        <el-form-item label="部门">
          <el-select v-model="formInline.buMne" placeholder="全部" clearable>
            <el-option v-for="item in options" :key="item.id" :label="item.buMenName" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职位">
          <el-select v-model="formInline.zhiWeir" placeholder="全部" clearable>
            <el-option v-for="item in opp" :key="item.id" :label="item.postsName" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
  <el-form-item label="到岗日期">
    <el-col :span="11">
      <el-date-picker type="date" placeholder="选择日期" v-model="formInline.ruDate" style="width: 100%;"></el-date-picker>
    </el-col>
  </el-form-item>
    <el-form-item label="合同签署日期">
    <el-col :span="11">
      <el-date-picker type="date" placeholder="选择日期" v-model="formInline.createDate" style="width: 100%;"></el-date-picker>
    </el-col>
  </el-form-item> 
        <el-form-item>
           <el-button type="primary" @click="Sel">查询</el-button>
          <el-button type="primary" @click="TianJia">新增员工</el-button>
          <el-button type="primary" @click="PiDel">批量删除</el-button>
          <el-button icon="el-icon-thumb" @click="Reset">重置</el-button>
        </el-form-item> 
       </el-form> 
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
        </el-table-column>>
        <el-table-column label="姓名" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.mingZhi }}</span>
          </template>
        </el-table-column>
        <el-table-column label="部门" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.bu }}</span>
          </template>
        </el-table-column>
        <el-table-column label="职位" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.zhi }}</span>
          </template>
        </el-table-column>
        <el-table-column label="上级负责人" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.rn }}</span>
          </template>
        </el-table-column>
        <el-table-column label="入职日期" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{Rud(scope.row.ruDate) }}</span>
          </template>
        </el-table-column>
          <el-table-column label="创建时间" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{Rud(scope.row.createDate) }}</span>
          </template>
        </el-table-column>
          <el-table-column label="审批状态" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px" v-if="scope.row.sitrte==0">待审批</span>
             <span style="margin-left: 10px" v-if="scope.row.sitrte==1">已同意</span>
              <span style="margin-left: 10px" v-if="scope.row.sitrte==2">已拒绝</span>
          </template>
        </el-table-column>
           <el-table-column label="审批人" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.shengPiRen }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="Fan(scope.row.id)">编辑</el-button>
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">查看</el-button>
            <el-button size="mini" type="danger" @click="Delete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageIndex"
        :page-sizes="[1, 3, 5, 7]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
</template>
<script>
export default {
  data () {
    return {
        dialogFormVisible: false,
        form: {
         buMne: '',
        zhiWeir: '',
        name: '',
        ren: '',
        ruDate: '',
        beiZhu: '',
        },
        formLabelWidth: '120px',
      formInline: {
        shengPiRen: '',
        buMne: '',
        zhiWeir: '',
       createDate: "",
        ruDate: '',
      },
      tableData: [],
      pageIndex: 1,
      pageSize: 3,
      total: 0,
      options: [],
       opp: [],
         aa: [],
      bb: [],
      multipleSelection: []
    }
  },
  created () {
    this.Sel();
     this.BingBu();
     this.BingZhi();
     this.BingName();
     this.BingShang();
  },
  methods: {
    TianJia () {
      this.$router.push("/OnbAdd")
    },
    PiDel () {
      var ids = []
      for (let i = 0; i < this.multipleSelection.length; i++) {
        ids.push(this.multipleSelection[i].id)
      }
      if (ids.length <= 0) {
        this.$message({
          message: '请选择一条数据',
          type: 'warning',
        });
        return
      }
      if (confirm("确定批量删除吗？")) {
        this.$http({
          url: "https://localhost:44357/api/Emp/OnbPiDel?ids=" + ids.toString(),
          method: "delete",
        }).then((r) => {
          if (r.data > 0) {
            this.$message({
              message: '警告哦,删除成功！',
              type: 'warning'
            });
            this.Sel();
          }
        })
      }
    },
    Rud (val) {
      var date = new Date(val)
      return date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDay() + "日";
    },
    Reset () {
      this.$router.go(0);
    },
    BingBu () {
      this.$http({
        url: "https://localhost:44357/api/Emp/BingBu",
        method: "get",
      }).then((r) => {
        this.options = r.data;
      })
    },
    BingZhi () {
      this.$http({
        url: "https://localhost:44357/api/Emp/BingZhi",
        method: "get",
      }).then((r) => {
        this.opp = r.data;
      })
    },
     BingName () {
      this.$http({
        url: "https://localhost:44357/api/Emp/BingName",
        method: "get",
      }).then((r) => {
        this.aa = r.data;
      })
    },
    BingShang () {
      this.$http({
        url: "https://localhost:44357/api/Emp/BingShang",
        method: "get",
      }).then((r) => {
        this.bb = r.data;
      })
    },

    Delete (id) {
      if (confirm("确定要删除嘛")) {
        this.$http({
          url: "https://localhost:44357/api/Emp/OnbDeleteshu",
          method: "delete",
          params: {
            id: id,
          },
        }).then((res) => {
          if ((res.data = 200)) {
            this.$message.error('恭喜你，删除员工成功！');
            this.Sel();
          }
        });
      }
    },

    Sel () {
      this.$http({
        url: "https://localhost:44357/api/Emp/OnbSel",
        method: 'get',
        params: {
           shengPiRen: this.formInline.shengPiRen,
           ruDate: this.formInline.ruDate,
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
          buMne: this.formInline.buMne,
         zhiWeir: this.formInline.zhiWeir,
            createDate: this.formInline.createDate,
        }
      }).then((r) => {
          console.log(r)
        this.tableData = r.data.data;
        this.total = r.data.total
      })
    },
    handleSizeChange (val) {
      this.pageSize = val;
      this.Sel();
    },
    handleCurrentChange (val) {
      this.pageIndex = val;
      this.Sel();
    },
    Fan (row) {
      document.cookie = row;
      localStorage.setItem("kqxq", row);
      this.$router.push("/OnbUpdate");
    },
    handleEdit (index, row) {
        this.dialogFormVisible = true
        this.form = row
      console.log(index, row);
    },
    handleDelete (index, row) {
      console.log(index, row);
    },
    handleSelectionChange (val) {
      this.multipleSelection = val;
    }
  }
}
</script>
